<template>
  <div>
    <pform ref="form" :model="form" lw="150">
      <el-form-item label="裸金属服务器名称">
        <div class="flex-c">
          <el-input size="small" class="w233" v-model="form.field1" placeholder="请输入"></el-input>
          <div class="explain">申请多台裸金属服务器时，系统自动增加后缀，例如：bms-0001</div>
        </div>
      </el-form-item>
      <el-form-item label="描述">
        <el-input type="textarea" class="w440" v-model="form.field2" :autosize="{ minRows: 3}" placeholder="请输入备注"></el-input>
      </el-form-item>
      <fbr></fbr>
      <el-form-item label="登录方式">
        <el-radio-group v-model="form.field3">
          <el-radio-button label="密钥对"></el-radio-button>
          <el-radio-button label="密码"></el-radio-button>
        </el-radio-group>
      </el-form-item>
      <div >
      </div>
      <div style="min-height: 166px;">
        <el-form-item label="密钥对" v-show="form.field3==='密钥对'">
          <div class="flex-c">
            <el-select size="small" class="w233" v-model="form.field4" placeholder="请选择">
              <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <i style="font-size: 25px;margin:0 10px 0 30px;" class="el-icon-refresh-right"></i>
            <div class="btntext">新建密钥对</div>
          </div>
        </el-form-item>
        <div v-show="form.field3==='密码'">
          <el-form-item label="用户名">
            <div>root</div>
          </el-form-item>
          <el-form-item label="密码">
            <el-input size="small" show-password class="w233" v-model="form.field5" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input size="small" show-password class="w233" v-model="form.field6" placeholder="请再次输入密码"></el-input>
          </el-form-item>
        </div>

      </div>
      <fbr></fbr>
      <el-form-item label="高级配置">
        <el-radio-group v-model="form.field7">
          <el-radio label="现在配置"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="用户数据注入">
        <el-radio-group v-model="form.field8">
          <el-radio-button label="文本"></el-radio-button>
          <el-radio-button label="文件"></el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="">
        <div style="min-height: 75px;">
          <el-input v-show="form.field8==='文本'" type="textarea" class="w440" v-model="form.field9" :autosize="{ minRows: 3}" placeholder="请输入用户数据内容"></el-input>
          <el-button size="mini" v-show="form.field8==='文件'" ><i class="el-icon-upload2 el-icon--left"></i>上传文件</el-button>
        </div>
      </el-form-item>
      <el-form-item label="标签">
        <div style="min-height: 80px;">
          <div class="flex-c">
            <pbtn class="mr15" @click="hasTag=true"></pbtn>
            <div>添加标签</div>
          </div>
          <div class="flex-c" v-show="hasTag">
            <pbtn class="mr15" @click="hasTag=false" iname="minus"></pbtn>
            <el-input size="small" class="w233 mr40" v-model="form.field10" placeholder="请输入标签键"></el-input>
            <el-input size="small" class="w233" v-model="form.field11" placeholder="请输入标签值"></el-input>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="委托">
        <div class="flex-c">
          <el-select size="small" class="w233" v-model="form.field12" placeholder="请选择">
            <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <i style="font-size: 25px;margin:0 10px 0 30px;" class="el-icon-refresh-right"></i>
          <div class="btntext">新建委托</div>
        </div>
      </el-form-item>
      <fbr></fbr>
    </pform>
  </div>
</template>

<script>
export default{
    data() {
      return {
        hasTag:false,
        form: {
          field1:'',
          field2:'',
          field3:'密码',
          field4:'',
          field5:'',
          field6:'',
          field7:'现在配置',
          field8:'文本',
          field9:'',
          field10:'',
          field11:'',
          field12:'',
          field13:'',
          field14:'',
          field15:'',
          field16:'',
          field17:'',
          field18:'',
          field19:'',
        },
        option:[
          
        ],
        option1:[
          {label:'vpc-default（192.168.0.0/16 ）',value:'1111'},
          {label:'vpc-defadsj（192.168.0.0/16 ）',value:'2222'},
          {label:'虚拟云名称（主网段）',value:'3333'},
        ],
        option2:[
          {label:'自动分配IP',value:'1111'},
          {label:'手动分配IP',value:'2222'},
        ],
        option3:[
          {label:'Sys-FullAccess',value:'1111'},
          {label:'Sys-FullAccess',value:'2222'},
          {label:'安全组名称',value:'3333'},
        ],
      }
    },
    methods: {
      init() {},
      getFormData() {
        return JSON.parse(JSON.stringify(this.form))
      },
    }

  }
</script>

<style scoped lang="less">
</style>
